<template>
<div class="container">
    <div class="card">
        <el-breadcrumb separator="/" class="card-body">
            <el-breadcrumb-item :to="{ path: '/AdminHome' }"><i class="el-icon-location"></i>首页</el-breadcrumb-item>
            <el-breadcrumb-item>{{ this.$route.meta.title }}</el-breadcrumb-item>
        </el-breadcrumb>
    </div>
    <div class="card">
        <div class="card-header">资产筛选</div>
        <div class="card-body">
            <div class="query-criteria clearfix">
                <el-form :inline="true" :model="assetsSort" class="demo-form-inline f-left">
                    <div class="el-form-item el-form-item--small"><label class="el-form-item__label">请选择</label></div>
                    <el-form-item>
                        <el-cascader :options="options" v-model="selectedOptions" :props="defaultProps" @change="handleChange">
                        </el-cascader>
                    </el-form-item>
                    <el-form-item>
                        <el-select v-model="assetsSort.state" placeholder="资产状态">
                            <el-option :label="s.label" :value="s.code" v-for="s in StaConfig" :key="s.index"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-select v-model="assetsSort.SecretLevel" placeholder="涉密级别">
                            <el-option :label="lv.label" :value="lv.code" v-for="lv in LevConfig" :key="lv.index"></el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item>
                        <el-input v-model.trim="assetsSort.otherInfo" placeholder="资产编号/资产/ip/mac地址/责任人"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="queryData(assetsSort)">查询</el-button>
                    </el-form-item>
                </el-form>
                <div class="fn-btn f-right">
                  <el-button type="warning" icon="el-icon-plus" @click="CreateAssets">添加资产</el-button>
                    <el-button type="warning" icon="el-icon-plus">导入资产</el-button>
                    <el-button type="warning" icon="el-icon-download">下载模板</el-button>
                    <el-button type="warning" icon="el-icon-document" @click="toLog">资产入库日志</el-button>
                </div>
            </div>
        </div>
    </div>
    <div class="card">
        <div class="card-header">资产列表</div>
        <div class="card-body">
            <el-table stripe :data="ListData" style="width: 100%">
                <el-table-column label="资产名字">
                    <template slot-scope="scope">
                      <router-link :to="'/AssetsManagement/AssetsDetail?id=' + scope.row.id">{{scope.row.name}}</router-link>
                    </template>
                </el-table-column>
                <el-table-column prop="code" label="编号" width="120">
                </el-table-column>
                <el-table-column prop="principalName" label="责任人" width="120">
                </el-table-column>
                <el-table-column prop="typeName" label="类目" width="120">
                </el-table-column>
                <el-table-column prop="assetsDeviceMappingList" label="所含设备" width="120">
                    <template slot-scope="scope">
                        <el-popover trigger="hover" placement="top">
                        <p v-for="item in scope.row.assetsDeviceMappingList" :key="item.index">{{ item.deviceName }}: <span>{{ item.number }}</span></p>
                        <div slot="reference" class="name-wrapper">
                            <el-tag size="medium">查看设备</el-tag>
                        </div>
                        </el-popover>
                    </template>
                </el-table-column>
                <el-table-column prop="secretLevel" label="涉密级别" width="120" align="center">
                  <template slot-scope="scope">
                    <span v-if="scope.row.secretLevel == '0'" class="color-danger">绝密</span>
                    <span v-if="scope.row.secretLevel == '1'" class="color-warning">机密</span>
                    <span v-if="scope.row.secretLevel == '2'" class="color-success">秘密</span>
                    <span v-if="scope.row.secretLevel == '3'" class="color-info">内控</span>
                    <span v-if="scope.row.secretLevel == '4'" class="color-info">公开</span>
                    <span v-else class="color-info">未定密级</span>
                  </template>
                </el-table-column>
                <el-table-column prop="departmentName" label="所属部门" width="80">
                </el-table-column>
                <el-table-column label="资产状态" width="120" align="center">
                  <template slot-scope="scope">
                    <span v-if="scope.row.assetStatus == '0'" class="color-success">在用</span>
                    <span v-if="scope.row.assetStatus == '1'" class="color-danger">维修</span>
                    <span v-if="scope.row.assetStatus == '2'" class="color-primary">出借</span>
                    <span v-if="scope.row.assetStatus == '3'" class="color-info">报废</span>
                    <span v-if="scope.row.assetStatus == '4'" class="color-success">在库</span>
                    <span v-if="scope.row.assetStatus == '5'" class="color-info">其他</span>
                  </template>
                </el-table-column>
                <el-table-column fixed="right" label="操作" width="250">
                    <template slot-scope="scope">
                      <el-button @click="assetsUpdate(scope.row.id)" type="text" size="small">修改</el-button>
                      <el-button @click="delteAsset(scope.row.id) " type="text" size="small">删除</el-button>
                      <el-button @click="assetsLogDetail(scope.row.id)" type="text" size="small">日志</el-button>
                      <el-button @click="LifeCycle(scope.row.id)" type="text" size="small">生命周期档案</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="page-wrap" v-if="pagesTotal>10">
                <el-pagination background @size-change="sizeChange" @current-change="currentChange" :current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="pagesTotal">
                </el-pagination>
            </div>
        </div>
    </div>
    <!-- 隐藏的日志弹出框 -->
    <el-dialog title="该资产操作日志" :visible.sync="dialogLogDegtail" :append-to-body='true'>
        <logDetailTable :id="id"></logDetailTable>
    </el-dialog>
</div>
</template>

<script>
import logDetailTable from "./components/AsstesLogDetail";
import request from "@/utils/request";
import config from "@/config/index";
export default {
  name: "AssetsManagement",
  components: {
    logDetailTable
  },
  data() {
    return {
      id: "",
      isLoading: false,

      pageSize: 10,
      pagesTotal: 0,
      currentPage: 1,

      assetsSort: {
        classify: "",
        state: "",
        SecretLevel: "",
        otherInfo: ""
      },
      ListData: [],
      dialogLogDegtail: false,

      options: [],
      selectedOptions: [],
      defaultProps: { value: "id" },

      LevConfig: "",
      StaConfig: ""
    };
  },
  methods: {
    delteAsset(id) {
      this.$confirm("确认删除这个资产？")
        .then(_ => {
          request({
            method: "get",
            url: this.$api.deleteAssets + `?id=${id}`
          }).then(res => {
            //刷新页面
            this.getAssetsList("", "", "", 10, 1, "", "");
          });
        })
        .catch(_ => {});
    },
    assetsLogDetail(id) {
      this.id = id;
      this.dialogLogDegtail = true;
    },
    assetsUpdate(id) {
      this.$router.push({
        path: "/AssetsManagement/AssetsUpdate" + "?id=" + id
      });
    },
    assetsDetail(id) {
      this.$router.push({
        path: "/AssetsManagement/AssetsDetail" + "?id=" + id
      });
    },
    CreateAssets() {
      this.$router.push({
        path: "/AssetsManagement/AssetsCreate"
      });
    },
    LifeCycle(id) {
      this.$router.push({
        path: "/AssetsManagement/LifeCycle" + "?id=" + id
      });
    },
    toLog() {
      this.$router.push({ path: "/AssetsManagement/log" });
    },
    getAssetsList(
      assetStatus = "",
      condition = "",
      departmentId = "",
      limit = 10,
      offset = 1,
      secretLevel = "",
      typeId = ""
    ) {
      this.isLoading = true;
      request({
        method: "get",
        url:
          this.$api.queryAssetsForPage +
          `?assetStatus=${assetStatus}&condition=${condition}&departmentId=${departmentId}&limit=${limit}&offset=${offset}&secretLevel=${secretLevel}&typeId=${typeId}`
      }).then(res => {
        this.ListData = res.data.list;
        this.pagesTotal = res.data.total;
        this.pageSize = res.data.pageSize;
        this.isLoading = false;
      });
    },
    sizeChange(pageSize) {},
    currentChange(currentPage) {},
    handleChange(value) {
      this.assetsSort.classify = value[value.length - 1];
    },
    queryData(parms) {
      let assetStatus = this.assetsSort.state;
      let condition = this.assetsSort.otherInfo;
      let departmentId = "";
      let SecretLevel = SecretLevel;
      let typeId = this.classify;
      this.getAssetsList(
        assetStatus,
        condition,
        departmentId,
        10,
        1,
        SecretLevel,
        typeId
      );
    },
    getAllSort() {
      request({
        url: this.$api.queryAllSort,
        method: "get"
      }).then(res => {
        this.options = res.data;
      });
    }
  },
  activated () {
    // 初始化分类数据
    this.getAssetsList("", "", "", 10, 1, "", "");
    this.getAllSort();
    this.LevConfig = config.SecretLevel;
    this.StaConfig = config.DeviceStatus;
  }
};
</script>

<style lang="less" scoped>
.query-criteria {
  .el-select {
    width: 120px;
  }
  .fn-btn {
    padding-bottom: 1rem;
    float: right;
  }
}
</style>